<template>
  <!-- 积分操作 -->
  <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :footer="true" @cancel="cancel" @confirm="confirm">
    <el-form ref="dataForm" :rules="rules" :model="dataForm" label-width="100px">

      <el-row>
        <el-col :span="12">

          <el-form-item prop="member_name" label="姓名">
            <el-input v-model="dataForm.member_name" placeholder="姓名" clearable disabled minlength="1" maxlength="20" show-word-limit />
          </el-form-item>

          <el-form-item prop="mobile" label="手机号">
            <el-input v-model="dataForm.mobile" placeholder="手机号" disabled maxlength="11" clearable show-word-limit />
          </el-form-item>

          <el-form-item prop="openid" label="OPENID">
            <el-input v-model="dataForm.openid" placeholder="微信公众号OPENID" disabled clearable />
          </el-form-item>

        </el-col>
        <el-col :span="12">

          <el-form-item prop="card_no" label="卡号">
            <el-input v-model="dataForm.card_no" placeholder="卡号" disabled clearable />
          </el-form-item>

          <el-form-item prop="level_name" label="等级">
            <el-input :value="dataForm.level_name" placeholder="等级" disabled clearable />
          </el-form-item>

          <el-form-item prop="card_id" label="ID">
            <el-input v-model="dataForm.card_id" placeholder="会员ID" disabled clearable />
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item prop="status" label="类型">
        <el-radio-group v-model="dataForm.type">
          <el-radio :label="0">百货</el-radio>
          <el-radio :label="1">餐饮</el-radio>
        </el-radio-group>
      </el-form-item>

      <div v-if="dataForm.type === 0">
        <el-form-item prop="orderNoIds" label="订单号">
          <el-input v-model="dataForm.orderNoIds" placeholder="函云小票号或者支付单号" clearable />
        </el-form-item>
      </div>

      <div v-if="dataForm.type === 1">
        <el-form-item prop="merch" label="餐饮商户">
          <merchant v-model="dataForm.merch" width="400px" />
        </el-form-item>
        <el-form-item prop="saleTime" label="交易时间">
          <el-date-picker v-model="dataForm.saleTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" clearable style="width: 400px" />
        </el-form-item>
        <el-form-item prop="paidAmount" label="实付金额">
          <el-input v-model="dataForm.paidAmount" placeholder="实付金额" clearable style="width: 400px" />
        </el-form-item>
      </div>

    </el-form>
  </u-dialog>

</template>

<script>
/**
 * 业务组件 - 补积分操作
 */
import Merchant from '@/components/dfire/merchant'
export default {
  components: {
    Merchant
  },
  name: 'AddOrderPoints',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      api: this.$u.api.Member,
      title: '补录销售',
      dataForm: {},
      rules: {
        orderNoIds: [
          { required: true, message: '请输入订单号', trigger: ['blur'] }
        ],
        merch: [
          { required: true, message: '请选择商户', trigger: ['blur'] }
        ],
        saleTime: [
          { required: true, message: '请输入交易时间', trigger: ['blur'] }
        ],
        paidAmount: [
          { required: true, message: '请输入实付金额', trigger: ['blur'] }
        ]
      }
    }
  },
  watch: {
    show(newVal, oldVal) {
      // console.log(newVal + '---------------' + oldVal)
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        // 初始化对象属性
        const newForm = {
          type: 0,
          orderNoIds: '',
          merch: '',
          saleTime: '',
          paidAmount: ''
        }
        this.dataForm = this.$u.deepMerge(newForm, this.data)
        this.$u.deepClone(this.data)
        const { member_name } = this.dataForm
        this.title = '补录销售:查询【' + member_name + '】'
        // 初始化数据
        this.dataForm.orderNoIds = ''

        // console.log(this.dataForm)
        const self = this
        self.$nextTick(() => {
          self.$refs['dataForm'].clearValidate()
        })
      }
    }
  },
  methods: {
    // 确认
    confirm() {
      const self = this
      const { type, card_no, orderNoIds, merch, saleTime, paidAmount } = self.dataForm

      self.$refs['dataForm'].validate((valid) => {
        if (valid) {
          self.$confirm('您确定补录积分,请谨慎操作', '提示', {
            type: 'warning',
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(() => {
            const data = { type, 'cardNo': card_no, 'orderNoIds': orderNoIds, merch, saleTime, paidAmount }
            self.api.addcredit(data).then(() => {
              // 通知信息
              self.$u.msg('操作成功')
              // 双向绑定数据
              self.$emit('changeShow', false)
              // 更新成功后传递
              self.$emit('change')
            }).catch(() => {
            })
          }).catch(() => {
          })
        }
      })

      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>
